<template>
  <div>
    <mu-dialog
      scrollable
      title="注册"
      width="500"
      max-width="90%"
      :esc-press-colse="false"
      :overlay-close="false"
      :open.sync="open"
    >
      <mu-form ref="form" :model="validateForm">
        <mu-form-item label="Email（必填）" prop="email" :rules="emailRules">
          <mu-text-field
            v-model="validateForm.email"
            prop="email"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="昵称" prop="nickName" :rules="nickNameRules">
          <mu-text-field
            v-model="validateForm.nickName"
            prop="nickName"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item
          label="密码（必填）"
          prop="password"
          :rules="passwordRules"
        >
          <mu-text-field
            v-model.trim="validateForm.password"
            :action-icon="visibility ? 'visibility_off' : 'visibility'"
            :action-click="() => (visibility = !visibility)"
            :type="visibility ? 'text' : 'password'"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item
          label="确认密码（必填）"
          prop="confirmPassword"
          :rules="confirmPasswordRules"
        >
          <mu-text-field
            v-model="validateForm.confirmPassword"
            prop="confirmPassword"
          ></mu-text-field>
        </mu-form-item>
        <mu-form-item label="验证码" prop="captcha" :rules="captchaRules">
          <mu-text-field v-model="validateForm.captcha" prop="captcha">
            <div class="captcha" @click="captchaRegClick">{{ captchaReg }}</div>
          </mu-text-field>
        </mu-form-item>
        <mu-form-item
          label="简介"
          prop="introduction"
          :rules="introductionRules"
        >
          <mu-text-field
            multi-line
            :rows="4"
            full-width
            v-model="validateForm.introduction"
            prop="introduction"
          >
          </mu-text-field>
        </mu-form-item>
      </mu-form>
      <mu-button slot="actions" flat>
        <mu-avatar :size="30" style="margin-right: 10px">
          <img :src="Icon.github" alt="" />
        </mu-avatar>
        github
      </mu-button>
      <mu-button slot="actions" flat small @click="clear">取消</mu-button>
      <mu-button slot="actions" flat small color="primary" @click="submit"
        >注册</mu-button
      >
    </mu-dialog>
  </div>
</template>
<script>
import { Icon } from '@/utils/'
import { Register, EmailRule } from '../notwork/accounts/register'
export default {
  props: {
    open: {
      type: Boolean,
      default: false
    },
    captchaReg: {
      type: String
    }
  },
  data () {
    return {
      Icon,
      visibility: false,
      validateForm: {
        email: '',
        nickName: '',
        password: '',
        confirmPassword: '',
        introduction: '',
        captcha: '',
        captchaReg: ''
      },
      emailRules: [
        { validate: (val) => !!val, message: '必须填写邮箱' },
        {
          validate: (val) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            return reg.test(val);
          },
          message: '邮箱格式错误'
        },
        {
          validate: async (val) => {
            const res = await EmailRule({ email: val })
            return res.meta.status === 200
          },
          message: '邮箱已存在'
        }
      ],
      nickNameRules: [
        { validate: (val) => val.length <= 20, message: '昵称长度小于20个字符' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' },
        {
          validate: (val) => {
            let reg = /^[a-zA-Z]\w{5,19}$/
            return reg.test(val);
          },
          message: '密码格式错误'
        }
      ],
      confirmPasswordRules: [
        { validate: (val) => !!val, message: '必须填写确认密码' },
        {
          validate: (val) => {
            return this.validateForm.password === val
          },
          message: '密码不一致，请重新输入'
        }
      ],
      captchaRules: [
        { validate: (val) => !!val, message: '请输入验证码' }
      ],
      introductionRules: [
        { validate: (val) => val.length <= 1000, message: '简介最大1000个字符' }
      ]
    }
  },
  methods: {
    clear () {
      this.$refs.form.clear()
      this.validateForm = {
        email: '',
        nickName: '',
        password: '',
        confirmPassword: '',
        introduction: '',
        captcha: ''
      }
      this.$emit('toggle', false)
    },
    submit () {
      this.$refs.form.validate().then(async valid => {
        if (!valid) return this.$toast.error('请填写注册内容')
        this.validateForm.captchaReg = this.captchaReg
        const res = await Register(this.validateForm)
        if (res.meta.status !== 200) return this.$toast.error(res.meta.msg)
        this.$toast.success(res.meta.msg)
        this.clear()
      });
    },
    captchaRegClick () {
      const captcha = Math.random().toString().slice(2, 6)
      this.$emit('captcha', captcha)
    }
  }
}
</script>
<style scoped>
.captcha {
  padding: 0 5px;
  background-color: #ccc;
  cursor: pointer;
}
</style>
